<script setup>
// vue2接收父组件传入的数据用props接收
// vue3使用defineProps方法接收
// defineProps有返回值,可以使用在js中
const props = defineProps({
  money: Number,
  car: String
})
// 儿子想花钱(能直接花么?) 不能
// vue3跟vue2不一样的地方
const emit = defineEmits(['changeMoney', 'changeCar'])

const pay = () => {
  // 子传父需要在子组件里除服emit事件
  // vue2 this.$emit
  emit('changeMoney', 10)
}

const changeCarFunc = () => {
  emit('changeCar', '小黄车')
}
console.log(props)
</script>

<template>
  <div class="child-page">
    child
    <p>爸爸给的钱: {{money}}</p>
    <p>爸爸又给车了: {{car}}</p>
    <button @click="pay">想花钱</button>
    <button @click="changeCarFunc">想换车</button>
  </div>
</template>

<style scoped></style>
